<style>
.center {
  width: 100%;
  height: 100%;
  background-image: url('https://ts1.cn.mm.bing.net/th/id/R-C.44f299ced432eed331541ab373e2125d?rik=O51jBtgF2UuS3g&riu=http%3a%2f%2fbpic.588ku.com%2fback_pic%2f05%2f78%2f04%2f075bfab0c8924ec.jpg&ehk=Durst8xZk%2ffb%2bbv0XrgEeFIxefs4IMiFnww82TmM4FY%3d&risl=&pid=ImgRaw&r=0');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  opacity: 0.9;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


h1 {
  font-size: 30px;
  color: black;
}


.registerInput {
  margin-top: 2vh;
}

.logon {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  /* position: relative;
  overflow: hidden; */
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  margin-top: 20px;
  display: flex;
  background: -webkit-linear-gradient(right, #4284db, #29eac4);
}

.overlaylong {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitle {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}


.overlaytitleH2 {
  font-size: 30px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleP {
  font-size: 15px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitle-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaytitle-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
}

.overlaylongH2 {
  font-size: 25px;
  color: black;
  width: 250px;
  font-weight: bold;
}

.overlaylong-Signin {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.overlaylong-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}

h3 {
  font-size: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.inupbutton {
  background-color: #29eac4;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 30px;
}


.ml2 {
  font-family: YouSheBiaoTiHei;
  font-size: 4.5rem;
}
</style>

<template>
  <div class="center">
    <h1 class="ml2">招聘数据可视化系统</h1>


    <div class="logon">
      <div :class="overlaylong">
        <div class="overlaylong-Signin" v-if="disfiex == 0">
          <h2 class="overlaylongH2" style="text-align: center">用户登录</h2>
          <el-form
              class="login_form"
              label-width="0px"
              :model="loginForm"
              :rules="rules"
              ref="loginForm">
            <el-form-item prop="username">
              <el-input
                  prefix-icon="el-icon-user"
                  v-model.trim="loginForm.username"
                  @keyup.native="loginForm.username = loginForm.username.replace(/\s/g,'')"
                  placeholder="请输入用户名"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                  prefix-icon="iconfont icon-weibiaoti--"
                  v-model="loginForm.password"
                  type="password"
                  placeholder="请输入密码"
                  @keyup.native.enter="login"
              ></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="login" type="primary" class="inupbutton" round :loading="buttonLoading">登录</el-button>
        </div>
        <div class="overlaylong-Signup" v-if="disfiex == 1">
          <h2 class="overlaylongH2">注册账号</h2>
          <el-input type="text" class="registerInput" placeholder="请输入用户名" v-model="registerForm.username"></el-input>
          <el-input type="password" class="registerInput" placeholder="请输入密码" v-model="registerForm.password"></el-input>
          <el-input type="password" class="registerInput" placeholder="请再次确认密码" v-model="confirmPassword"></el-input>
          <el-input type="text" class="registerInput" placeholder="请输入邮箱" v-model="registerForm.email">
          </el-input>
          <el-input type="text" class="registerInput" placeholder="请输入验证码" v-model="registerForm.code">
            <el-button slot="append" @click="sendEmail" :disabled="emailDisabled">{{emailText}}</el-button>
          </el-input>
          <div class="registerInput">
            <el-button type="primary" class="inupbutton" :loading="buttonLoading" @click="register" round>注册</el-button>
          </div>
        </div>

      </div>
      <div :class="overlaytitle">
        <div class="overlaytitle-Signin" v-if="disfiex == 0">
          <h2 class="overlaytitleH2">Recruitment visualization</h2>
          <p class="overlaytitleP">
            欢迎使用招聘数据可视化系统 <br> By:阮怡帆
          </p>
          <div class="buttongohs" @click="Signin">创建账号</div>
        </div>
        <div class="overlaytitle-Signup" v-if="disfiex == 1">
          <h2 class="overlaytitleH2">欢迎!</h2>
          <p class="overlaytitleP">欢迎您使用全面,专业,易用的可视化招聘系统!</p>
          <div class="buttongohs" @click="Signup">已有账号?去登录</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import {Register, SendEmailCode} from "@/API/api";

export default {
  name: "Login",
  data() {

    return {
      loginForm: {
        username: "",
        password: "",
      },
      registerForm: {
        username: "",
        password: "",
        code: "",
        email: "",
      },
      buttonLoading: false,
      emailText: '发送验证码',
      emailCountDown: 0,
      emailLoading: false,
      emailDisabled: false,
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          // trigger: "blur" 代表鼠标移动焦点时触发验证
          {min: 6, max: 16, message: "用户名长度在6~16个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 6, max: 16, message: "密码长度在6~16个字符", trigger: "blur"},
        ],

      },
      overlaylong: 'overlaylong',
      overlaytitle: 'overlaytitle',
      disfiex: 0,
      confirmPassword:''
    }
  },
  methods: {
    Signin() {
      this.overlaylong = "overlaylongleft"
      this.overlaytitle = "overlaytitleright"
      setTimeout(() => {
        this.disfiex = 1
      }, 200)
    },
    Signup() {
      this.overlaylong = "overlaylongright"
      this.overlaytitle = "overlaytitleleft"

      setTimeout(() => {
        this.disfiex = 0
      }, 200)

    },
    login() {
      this.buttonLoading = true
      this.$refs.loginForm.validate(result => {
        if (result) {
          this.$api.Login(this.loginForm).then(res => {
            const data = res.data
            const token = data.access_token
            const refresh_token = data.refresh_token
            window.sessionStorage.setItem('AccessToken', token)
            window.sessionStorage.setItem('RefreshToken', refresh_token)
            window.sessionStorage.setItem('username', this.loginForm.username)
            this.$message.success({
              duration: 800,
              message: '登录成功!'
            })
            setTimeout(() => this.$router.push({"name": "Welcome"}), 1000)
          }).catch(async err => {
                let rep = err.response
                let error_message = ''
                switch (rep.status) {
                  case 401:
                    error_message = '用户名或密码错误'
                    break
                  case 500:
                    error_message = '服务器网络异常'
                    break
                  default:
                    error_message = rep.data.message
                }
                this.$message.error(error_message);
              }
          ).finally(() => {
            setTimeout(() => {
              this.buttonLoading = false
            }, 1000)
          })
        }

      })
    },
    sendEmail() {
      this.emailLoading = true
      this.$api.SendEmailCode({"username": this.registerForm.username, email: this.registerForm.email}).then(rep => {
        if (rep.data.success) {
          this.$message.success('验证码发送成功!')
          this.startCountDown()
          this.emailDisabled = true
        } else {
          this.$message.warning(rep.data.message)
        }
      })
    },
    startCountDown() {
      this.emailCountDown = 90
      let interval = setInterval(() => {
        if (this.emailCountDown > 0) {
          this.emailCountDown--;
          this.emailText = `${this.emailCountDown}秒后重试`
        } else {
          this.emailText = '发送验证码'
          this.emailDisabled = false
          clearInterval(interval);
        }
      }, 1000);  // 每秒更新一次倒计时
    },
    register(){
      if (this.registerForm.password!==this.confirmPassword){
        this.$message.warning({
          duration: 500,
          message: '两次密码输入不一致!'
        })
       return
      }
      this.$api.Register(this.registerForm).then(res => {
        const data = res.data
        const token = data.access_token
        const refresh_token = data.refresh_token
        window.sessionStorage.setItem('AccessToken', token)
        window.sessionStorage.setItem('RefreshToken', refresh_token)
        window.sessionStorage.setItem('username', this.loginForm.username)
        this.$message.success({
          duration: 800,
          message: '注册成功!'
        })
        setTimeout(() => this.$router.push({"name": "Welcome"}), 1000)
      }).catch(async err => {
            let rep = err.response
            let error_message = ''
            switch (rep.status) {
              case 500:
                error_message = '服务器网络异常'
                break
              default:
                error_message = rep.data.message
            }
            this.$message.error(error_message);
          }
      ).finally(() => {
        setTimeout(() => {
          this.buttonLoading = false
        }, 1000)
      })
    }
  },

}
</script>